fix(examples/ts-code-mode-web): persist reports across reloads#515
fix(examples/ts-code-mode-web): persist reports across reloads#515arnthors wants to merge 1 commit intoTanStack:mainfrom
Conversation
The debounced save in usePersistedReports was created once and cached
in a ref, capturing the initial empty 'reports' Map and null
'activeReportId' from the first effect run. Subsequent renders re-fired
the effect but reused the cached closure, so every localStorage.setItem
wrote the empty initial state.
Recreate the debounced save each effect run; the cleanup cancels the
in-flight debounce on each render so debouncing semantics are preserved.
Repro:
1. Run examples/ts-code-mode-web (pnpm dev) and open /reporting-agent
2. Generate a report
3. DevTools > Application > Local Storage > 'tanstack-ai-reports' shows
{"reports":[],"activeReportId":null,"version":1} despite the
populated UI; reload makes the report disappear
📝 WalkthroughWalkthroughA React hook's localStorage persistence effect was refactored to create a fresh debounced save function on each dependency change instead of reusing a stored reference, with immediate invocation and targeted cleanup per debounced instance. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/ts-code-mode-web/src/lib/reports/use-persisted-reports.ts`:
- Line 3: The import member order in the React import in
use-persisted-reports.ts is not alphabetized and violates sort-imports; reorder
the named imports in the statement "import { useState, useEffect, useCallback }
from 'react'" to alphabetic order (useCallback, useEffect, useState) so the
import line follows ESLint's sort-imports rule.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 45c9e994-3a33-4f7a-ac5a-913e79ae1885
📒 Files selected for processing (1)
examples/ts-code-mode-web/src/lib/reports/use-persisted-reports.ts
| 'use client' | ||
|
|
||
| import { useState, useEffect, useCallback, useRef } from 'react' | ||
| import { useState, useEffect, useCallback } from 'react' |
There was a problem hiding this comment.
Fix import member order to satisfy ESLint.
Line 3 currently violates sort-imports (members should be alphabetized), which can fail lint checks.
Suggested fix
-import { useState, useEffect, useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useState, useEffect, useCallback } from 'react' | |
| import { useCallback, useEffect, useState } from 'react' |
🧰 Tools
🪛 ESLint
[error] 3-3: Member 'useEffect' of the import declaration should be sorted alphabetically.
(sort-imports)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/ts-code-mode-web/src/lib/reports/use-persisted-reports.ts` at line
3, The import member order in the React import in use-persisted-reports.ts is
not alphabetized and violates sort-imports; reorder the named imports in the
statement "import { useState, useEffect, useCallback } from 'react'" to
alphabetic order (useCallback, useEffect, useState) so the import line follows
ESLint's sort-imports rule.
1 participant
🎯 Changes
The debounced save in
usePersistedReportsis created once and cached in a ref, capturing the initial emptyreportsMap andnullactiveReportIdfrom the first effect run. Subsequent renders re-fire the effect but reuse the cached closure, so everylocalStorage.setItemwrites the empty initial state — the UI shows populated reports while localStorage stays empty, and reports vanish on reload.useRefimport andsaveRefdeclaration.Repro on
mainpnpm devinexamples/ts-code-mode-web, open/reporting-agenthttp://localhost:3001tanstack-ai-reportsstays{"reports":[],"activeReportId":null,"version":1}despite the populated UI; reload → report disappearsAfter this PR the value contains the full serialized report and survives reload.
Note on the missing contributing guide
The repo currently has no
CONTRIBUTING.md— bothREADME.mdand.github/pull_request_template.mdlink to one that 404s. Filed #514 with details. As a substitute, I followedTanStack/query's CONTRIBUTING.md, adapted for this repo:pnpm build:all✅pnpm run test:pr(the nx-based per-PR entrypoint) ✅, all tasks pass.nvmrc-pinned 24.8.0"private": true(pnpm changeset statusconfirms no packages to bump)✅ Checklist
pnpm run test:pr.🚀 Release Impact
ts-code-mode-webexample is"private": trueand not published.Summary by CodeRabbit